<template>
  <div class="container">
    <div class="login">
      <h3>vivo后台管理系统</h3>
      <el-form :rules="rules" :model="info" ref="formrules">
        <el-form-item prop="account" label="账号:">
          <el-input
            class="input"
            v-model="info.account"
            placeholder="请输入账号"
            clearable
          >
            <template #prefix>
              <svg class="icon">
                <use xlink:href="#icon-4zhanghu"></use>
              </svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            class="input"
            type="password"
            v-model="info.password"
            placeholder="请输入密码:"
            clearable
          >
            <template #prefix>
              <svg class="icon">
                <use xlink:href="#icon-mima"></use>
              </svg>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button class="loginbtn" @click="submitForm(formrules)">登录</el-button>
      <br>
         <el-button class="link" @click="skipTwo" link type="primary">没有账号,去注册</el-button>
    </div>
  </div>
</template>
  <script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import http from "../tools/axios";
const info = ref({ account: "", password: "" });
const rules = ref({
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 10, message: "账号长度应为3-10", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 10, message: "密码长度应为3-10", trigger: "blur" },
  ],
});

const router = useRouter();
const formrules = ref(null);
const skipTwo = () =>{
  router.push('/register')
}

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      http.post('/admin/login',info.value).then((res)=>{
        console.log(res);
        if (res.code === 0 ){
          ElMessage({
          showClose: true,
          message: "登录成功",
          type: "success",
        });
        router.push("/user");
        }
        else{
          ElMessage({
          showClose: true,
          message: "账号或者密码错误",
          type: "error",
        });
        }
    })
    } else {
      ElMessage({
          showClose: true,
          message: "请正确填写",
          type: "error",
        });
    }
  });
};
</script>
 <style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('https://passport.douguo.com/public/img/web/sinin.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login {
  flex-direction: column;
  display: flex;
  justify-content: center;
  width: 400px;
  box-sizing: border-box;
  padding: 20px 60px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.login h3 {
  text-align: center;
}
.icon {
  width: 20px;
  height: 20px;
}
.loginbtn {
  padding: 0 90px;
  height: 40px;
  border-radius: 25px;
  border: none;
  background-color: skyblue;
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
}

.login .link{
    float: right;
  }

.input {
  width: 200px;
}
</style>
 